<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <style>
        div{
            border: 1px solid red;
        }

        #div1{
            width: 200px;
            height: 200px;
        }

        #div2{
            width: 100px;
            height: 100px;
        }

        #div3{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>

    <div id="div1">
        <div id="div2">
            div2
        </div>
        div1
    </div>
    <a href="javascript:void(0);" id="del">删除子节点</a>
    <a href="javascript:void(0);" id="add">添加子节点</a>
<!--    <input type="button" value="删除子节点" id="del">-->

<script>

    /*
        Node: 节点对象,其他 5 个的父对象
			特点: 所有 DOM 对象都可以被认为是一个节点
			方法:
				CRUD dom树:
					appendChild(): 向节点的子节点列表的结尾添加新的子节点
					removeChild(): 删除(并返回)当前节点的指定子节点
					replaceChild(): 用新节点替换一个子节点
				属性:
					parentNode: 返回节点的父节点
     */

    //removeChild(): 删除(并返回)当前节点的指定子节点
    //获取超链接
    var element_a = document.getElementById("del");
    //绑定点击事件
    element_a.onclick = function () {
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);
    }

    //appendChild(): 向节点的子节点列表的结尾添加新的子节点
    //获取超链接
    var element_add = document.getElementById("add");
    //绑定点击事件
    element_add.onclick = function () {
        var div1 = document.getElementById("div1");
        //给div1添加子节点
        //创建子节点
        var div3 = document.createElement("div");
        div3.setAttribute("id","div3");
        div1.appendChild(div3);
    }


</script>

</body>
</html>